import 'package:display/theme.dart';
import 'package:fluent_ui/fluent_ui.dart';
import 'package:flutter/material.dart';

import 'package:get/get.dart';
import 'package:system_theme/system_theme.dart';

import '../controllers/home_controller.dart';

class _NavigationBodyItem extends StatelessWidget {
  const _NavigationBodyItem({
    this.header,
    this.content,
  });

  final String? header;
  final Widget? content;

  @override
  Widget build(BuildContext context) {
    return ScaffoldPage.withPadding(
      header: PageHeader(title: Text(header ?? 'This is a header text')),
      content: content ?? const SizedBox.shrink(),
    );
  }
}

// ignore: must_be_immutable
class HomeView extends GetView<HomeController> {
  HomeView({super.key});
  static const double itemHeight = 300.0;

  int topIndex = 0;

  List<NavigationPaneItem> items = [
    PaneItem(
      icon: const Icon(FluentIcons.home),
      title: const Text('Home'),
      body: const _NavigationBodyItem(),
    ),
    PaneItemSeparator(),
    PaneItem(
      icon: const Icon(FluentIcons.issue_tracking),
      title: const Text('Track orders'),
      infoBadge: const InfoBadge(source: Text('8')),
      body: const _NavigationBodyItem(
        header: 'Badging',
        content: Text(
          'Badging is a non-intrusive and intuitive way to display '
          'notifications or bring focus to an area within an app - '
          'whether that be for notifications, indicating new content, '
          'or showing an alert. An InfoBadge is a small piece of UI '
          'that can be added into an app and customized to display a '
          'number, icon, or a simple dot.',
        ),
      ),
    ),
    PaneItem(
      icon: const Icon(FluentIcons.disable_updates),
      title: const Text('Disabled Item'),
      body: const _NavigationBodyItem(),
      enabled: false,
    ),
    PaneItemExpander(
      icon: const Icon(FluentIcons.account_management),
      title: const Text('Account'),
      body: const _NavigationBodyItem(
        header: 'PaneItemExpander',
        content: Text(
          'Some apps may have a more complex hierarchical structure '
          'that requires more than just a flat list of navigation '
          'items. You may want to use top-level navigation items to '
          'display categories of pages, with children items displaying '
          'specific pages. It is also useful if you have hub-style '
          'pages that only link to other pages. For these kinds of '
          'cases, you should create a hierarchical NavigationView.',
        ),
      ),
      items: [
        PaneItemHeader(header: const Text('Apps')),
        PaneItem(
          icon: const Icon(FluentIcons.mail),
          title: const Text('Mail'),
          body: const _NavigationBodyItem(),
        ),
        PaneItem(
          icon: const Icon(FluentIcons.calendar),
          title: const Text('Calendar'),
          body: const _NavigationBodyItem(),
        ),
      ],
    ),
  ];

  final appTheme = AppTheme();

  @override
  Widget build(BuildContext context) {
    HomeController controller = Get.find();
    return FluentApp(
      title: "",
      // themeMode: appTheme.mode,
      // color: appTheme.color,
      // darkTheme: FluentThemeData(
      //   brightness: Brightness.light,
      //   accentColor: appTheme.color,
      //   visualDensity: VisualDensity.standard,
      //   focusTheme: FocusThemeData(
      //     glowFactor: is10footScreen(context) ? 2.0 : 0.0,
      //   ),
      // ),
      // theme: FluentThemeData(
      //   accentColor: appTheme.color,
      //   visualDensity: VisualDensity.standard,
      //   focusTheme: FocusThemeData(
      //     glowFactor: is10footScreen(context) ? 2.0 : 0.0,
      //   ),
      // ),
      locale: appTheme.locale,
      builder: (context, child) {
        return Obx(() => Directionality(
              textDirection: appTheme.textDirection,
              child: NavigationPaneTheme(
                data: const NavigationPaneThemeData(
                    backgroundColor: Color.fromARGB(0, 0, 0, 0)),
                child: NavigationView(
                  pane: NavigationPane(
                    selected: controller.topIndex.value,
                    onChanged: (index) => {controller.topIndex.value = index},
                    displayMode: PaneDisplayMode.open,
                    header: const Text('Pane Header'),
                    items: items,
                    footerItems: [
                      PaneItem(
                        icon: const Icon(FluentIcons.settings),
                        title: const Text('Settings'),
                        body: const _NavigationBodyItem(),
                      ),
                      PaneItemAction(
                        icon: const Icon(FluentIcons.add),
                        title: const Text('Add New Item'),
                        onTap: () {
                          items.add(
                            PaneItem(
                              icon: const Icon(FluentIcons.new_folder),
                              title: const Text('New Item'),
                              body: const Center(
                                child: Text(
                                  'This is a newly added Item',
                                ),
                              ),
                            ),
                          );
                        },
                      ),
                    ],
                  ),
                ),
              ),
            ));
      },
    );
  }
}
